<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="试题创编" name="first">
      <div class="main">
        <div class="topBlock">
          <el-button size="medium" icon="el-icon-plus" style="margin-left: 0px; "/>
          <el-button size="medium" icon="el-icon-delete-solid"/>
          <el-input placeholder="请输入内容" v-model="BankQuestionParam.selectText" class="input-with-select"
                    style="margin-left: 10px;width: 500px; ">
            <el-button slot="append" icon="el-icon-search" @click="getBankQuestion"></el-button>
          </el-input>

          <el-select v-model="BankQuestionParam.questionType" clearable placeholder="题目类型" style="margin-left: 10px">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

          <el-select v-model="BankQuestionParam.subjectId" clearable placeholder="学科类型" style="margin-left: 10px">
            <el-option
                v-for="item in subjectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

        </div>
        <div class="table">
          <el-table :data="bankQuestionListData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
                    :header-cell-style="{'border': 'none',textAlign:'start'}"
                    :cell-style="{'border': 'true',textAlign:'start',}"
                    border
                    ref="multipleTable"
                    max-height="690"
          >
            <el-table-column type="selection"/>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column
                label="试题标题"
            >
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.questionTitle }}</p>
                  <div v-if="scope.row.questionType==1||scope.row.questionType==2"
                       v-for="(item,index) in scope.row.bankQuestionChoiceList">
                    <p style="margin-left: 10px;display: inline-block ">{{ preChoice[index] }}.</p>
                    <p style="margin-left: 10px; display: inline-block">{{ item.choiceText }}</p>
                  </div>
                  <div v-if="scope.row.questionType==3 " v-for="(item,index) in scope.row.bankQuestionAnswerList">
                    <p style="margin-left: 10px;display: inline-block ">({{ index + 1 }}).</p>
                    <p style="margin-left: 10px; display: inline-block;width: 400px">{{ item.answerText }}</p>
                  </div>
                  <div v-if="scope.row.questionType==4 " v-for="(item,index) in scope.row.bankQuestionAnswerList">
                    <p style="margin-left: 10px;color: #67C23A ">参考答案.</p>
                    <p style="margin-left: 10px;width: 400px">{{ item.answerText }}</p>
                  </div>
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row.questionTitle }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="questionType" label="试题类型">
              <template slot-scope="scope">
                <span> {{ typeOptions[Number(scope.row.questionType) - 1].label }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="questionType" label="学科类型">
              <template slot-scope="scope">
                <span> {{ subjectOptions[Number(scope.row.questionSubjectId) - 1].label }} </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="footers">
        <el-pagination

            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, total, sizes"
            :total="bankQuestionListData.length"
            :current-page="currentPage"
            :page-sizes="[12,20]"
        >
        </el-pagination>
      </div>
    </el-tab-pane>

  </el-tabs>

</template>

<script>
import {getBankQuestionApi} from "@/api/BankQuestion";

export default {
  name: "BankQuestionListView",
  data() {
    return {
      BankQuestionParam: {
        selectText: "",
        questionType: "",
        subjectId: '',
      },
      //选项前缀
      preChoice: ['A', 'B', 'C', 'D'],
      subjectOptions: [
        {
          value: '1',
          label: '工科'
        }, {
          value: '2',
          label: '理科'
        }, {
          value: '3',
          label: '文科'
        }, {
          value: '4',
          label: '社会科学'
        }, {
          value: '5',
          label: '商科'
        }, {
          value: '6',
          label: '医学'
        }, {
          value: '7',
          label: '艺术'
        }, {
          value: '8',
          label: '体育'
        }, {
          value: '9',
          label: '计算机科学'
        }, {
          value: '10',
          label: '环境科学'
        }],
      typeOptions: [
        {
          value: '1',
          label: '单选题'
        }, {
          value: '2',
          label: '多选题'
        }, {
          value: '3',
          label: '填空题'
        }, {
          value: '4',
          label: '简答题'
        }],
      activeName: "first",
      bankQuestionListData: [],
      //分页数据
      currentPage: 1, //初始页
      pageSize: 12, //    每页的数据

    }
  },
  methods: {
    getBankQuestion() {
      getBankQuestionApi(this.BankQuestionParam).then(res => {
        if (res.data.code = 200) {

          console.info("res.data.data", res.data.data)
          this.currentPage = 1;
          this.bankQuestionListData = res.data.data
        }
      })
    },
    handleSizeChange(size) {
      // console.log(size, 'size');
      this.pageSize = size;
      console.log(this.pageSize); //改变每页显示数据条数
    },
    handleCurrentChange(currentPage) {
      // console.log(currentPage, 'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
  },
  created() {
    this.getBankQuestion()
  }
}
</script>

<style scoped>

.main {
  height: 700px;
  /*background-color: #42b983;*/
}

.topBlock {
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: start;
  border-radius: 5px;
}

::v-deep .cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 25px;
}

.footers {
  position: relative;
  bottom: -20px;
  width: 100%;
  height: 50px;

}

</style>


